@import '../base/variables';

.AknTag {
  display: inline-block;
  height: 18px;
  line-height: 16px;
  font-size: @AknFontSizeSmall;
  text-transform: uppercase;
  border: 1px solid;
  padding: 0 6px;
  border-radius: 2px;

  border-color: @AknIllustrationPurple100;
  background-color: @AknIllustrationPurple20;
  color: @AknIllustrationPurple120;

  &--purple {}

  &--darkPurple {
    border-color: @AknIllustrationDarkPurple100;
    background-color: @AknIllustrationDarkPurple20;
    color: @AknIllustrationDarkPurple120;
  }

  &--blue {
    border-color: @AknIllustrationBlue100;
    background-color: @AknIllustrationBlue20;
    color: @AknIllustrationBlue120;
  }

  &--darkBlue {
    border-color: @AknIllustrationDarkBlue100;
    background-color: @AknIllustrationDarkBlue20;
    color: @AknIllustrationDarkBlue120;
  }

  &--green {
    border-color: @AknIllustrationGreen100;
    background-color: @AknIllustrationGreen20;
    color: @AknIllustrationGreen120;
  }

  &--yellow {
    border-color: @AknIllustrationYellow100;
    background-color: @AknIllustrationYellow20;
    color: @AknIllustrationYellow120;
  }

  &--red {
    border-color: @AknIllustrationRed100;
    background-color: @AknIllustrationRed20;
    color: @AknIllustrationRed120;
  }
}
